<template>
	<view class="paradise-details">
		<view class="pd_header">
			<view class="pd_header_img">
				<image  src="https://kayouyou-1257308601.cos.ap-guangzhou.myqcloud.com/5619fbaedf3840a88ae3cee5d9d5f498.png" mode="aspectFill"></image>
			</view>
			<view class="pd_title">喜九重庆老火锅-数字宝箱这里显示宝箱的名称百年老火锅领先创造者</view>
			<view class="pd_info">
				<view class="pd_i_l">
					￥<text>29.00</text>
				</view>
				<view class="pd_i_r">
					<view class="pd_i_r_01">发行</view>
					<view class="pd_i_r_02">1000份</view>
				</view>
			</view>
		</view>
		<view class="pd_body">
			<view class="pd_b_item">
				<view class="pdb_l">
					<image class="pdb_l_img" src="/static/index/paradise/p_01.png" ></image>
					<view class="pdb_l_title">数字勋章</view>
				</view>
				<view class="pdb_line"></view>
				<view class="pdb_r">
					<view class="pdb_r_one">获得餐饮勋章500点贡献值</view>
					<view class="pdb_r_two">到店使用后发放</view>
					<view class="pdb_r_two pdb_r_u">勋章ID:002545</view>
				</view>
			</view>
			<view class="pd_b_item">
				<view class="pdb_l">
					<image class="pdb_l_img" src="/static/index/paradise/p_02.png" ></image>
					<view class="pdb_l_title pdb_l_title_two">超值到店</view>
				</view>
				<view class="pdb_line"></view>
				<view class="pdb_r">
					<view class="pdb_r_one pdb_r_one_two">喜九重庆老火锅超值双人餐数字宝箱</view>
					<view class="pdb_r_other">
						<view class="pdb_r_other_l">价值299</view>
						<view class="pdb_r_other_r" @click="jumpDetails">
							<text>详情</text>
							<image src="/static/right_img.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="pd_b_item">
				<view class="pdb_l">
					<image class="pdb_l_img" src="/static/index/paradise/p_03.png" ></image>
					<view class="pdb_l_title">CoCo</view>
				</view>
				<view class="pdb_line"></view>
				<view class="pdb_r">
					<view class="pdb_r_one">获得餐饮勋章500点贡献值</view>
					<view class="pdb_r_two">到店使用后发放</view>
					<view class="pdb_r_three">勋章加成：+61%</view>
				</view>
			</view>
			<view class="pd_b_item">
				<view class="pdb_l">
					<image class="pdb_l_img" src="/static/index/paradise/p_04.png" ></image>
					<view class="pdb_l_title pdb_l_title_two">幸运奖池</view>
				</view>
				<view class="pdb_line"></view>
				<view class="pdb_r">
					<view class="pdb_r_one pdb_r_one_two">最高瓜分价值8000元CoCo</view>
					<view class="pdb_r_two">当前奖池：5000CoCo</view>
					<view class="pdb_r_other">
						<navigator url="/pages/index/shenye-paradise/paradise-details/paradise-jackpot" hover-class="none" class="pdb_r_other_r">
							<text>已开奖</text>
							<image src="/static/right_img.png" mode="widthFix"></image>
						</navigator>
						<view class="pdb_r_other_r">
							<text>玩法规则</text>
							<image src="/static/right_img.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="line"></view>
		<view class="event_details">
			<view class="ed_title">活动详情</view>
			<image class="ed_img" src="https://kayouyou-1257308601.cos.ap-guangzhou.myqcloud.com/b24d9bc5faa34a14ab38a1c2cabb2883.png" mode="widthFix"></image>
		</view>
		<view class="pd_footer">
		<view class="cg_but" @click="tips">立即抢购锁定奖池资格</view>
			<!-- <view class="cg_but" >立即购买</view> -->
			<!-- <view class="cg_but cg_but_one" >已售罄</view> -->

		</view>
		
		<uni-popup ref="popup"  style="z-index:999;">
			<view class="popupBox">
				<view class="p_title">购买提示</view>
				<view class="p_subtitle">购买宝箱后将锁定幸运奖池资格</view>
				<view class="p_content">
					<image src="/static/wallet/wallet_warning_02.png" mode="widthFix"></image>
					<text>如需退款需要扣除10元手续费，并移去幸运奖池资格。</text>
				</view>
				<view class="p_but" @click="closeTips"></view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			// 显示购买提示
			tips(){
				this.$refs.popup.open()
			},
			// 显示购买提示
			closeTips(){
				this.$refs.popup.close()
			},
			// 跳转店铺详情
			jumpDetails(){
				uni.navigateTo({
					url:'/pages/index/shenye-paradise/paradise-details/arrival-details'
				})
			}
		}
	}
</script>

<style scoped>
	.paradise-details{
		width: 100%;
		min-height: 776rpx;
		background: url('@/static/index/paradise/p_bg.png') no-repeat;
		background-size: 100% 776rpx;
		padding-top: 40rpx;
	}
	.pd_header_img{
		width: 690rpx;
		height: 392rpx;
		margin: 0 auto;
	}
	.pd_header_img image{
		width: 100%;
		height: 100%;
		border-radius: 24rpx;
	}
	.pd_title{
		width: 100%;
		padding: 0 40rpx;
		box-sizing: border-box;
		font-size: 34rpx;
		line-height: 48rpx;
		color: #FFFFFF;
		margin-top: 48rpx;
		font-weight: 600;
	}
	.pd_info{
		width: 100%;
		padding: 0 40rpx;
		margin-top: 22rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.pd_i_l{
		font-size: 40rpx;
		color: #FFFFFF;
	}
	.pd_i_l text{
		font-size: 50rpx;
	}
	.pd_i_r{
		display: flex;
		flex-direction: row;
		font-size: 22rpx;
	}
	.pd_i_r_01{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 70rpx;
		height: 36rpx;
		background: #1A1918;
		border-radius: 8rpx 0px 0px 8rpx;
		color: #FFD748;
	}
	.pd_i_r_02{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 36rpx;
		background: #FFD681;
		border-radius: 0px 8rpx 8rpx 0px;
		padding: 0 16rpx;
		color: #A46F08;
	}
	
	/*  */
	.pd_body{
		width: 750rpx;
		background: #FFFFFF;
		border-radius: 60rpx 60rpx 0px 0px;
		padding-top: 60rpx;
		padding-bottom: 70rpx;
		margin-top: 44rpx;
	}
	.pd_b_item{
		width: 690rpx;
		margin: 0 auto;
		background: #FFFFFF;
		box-shadow: 0px 0px 20rpx #DBDBDB;
		border-radius: 24rpx;
		box-sizing: border-box;
		padding: 18rpx 30rpx 18rpx 34rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 30rpx;
	}
	.pdb_l{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.pdb_l_img{
		width: 80rpx;
		height: 90rpx;
	}
	.pdb_l_title{
		width: 128rpx;
		height: 40rpx;
		background: linear-gradient(90deg, #FFDC6A 10.83%, #F5951D 100%);
		border-radius: 200rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 40rpx;
	}
	.pdb_line{
		width: 0;
		height: 136rpx;
		border-right: 2rpx solid #DCDCDC;
		margin-left: 34rpx;
		margin-right: 42rpx;
	}
	.pdb_r{
		flex: 1;
	}
	.pdb_r_one{
		margin-bottom: 10rpx;
		color: #222222;
		font-size: 32rpx;
		font-weight: 600;
	}
	.pdb_r_two{
		font-size: 26rpx;
		color: #929292;
		margin-bottom: 14rpx;
	}
	.pdb_r_u{
		margin-bottom: 0;
	}
	
	/* 超值到店*/
	.pdb_l_title_two{
		background: linear-gradient(90deg, #FF845E 10.83%, #FD531D 100%);
	}
	.pdb_r_one_two{
		margin-bottom: 18rpx;
	}
	.pdb_r_other{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.pdb_r_other_l{
		padding: 2rpx 10rpx;
		border: 2rpx solid #FE3131;
		border-radius: 4px;
		color: #FE3131;
		font-size: 24rpx;
	}
	.pdb_r_other_r{
		font-size: 26rpx;
		color: #444444;
	}
	.pdb_r_other_r image{
		width: 18rpx;
		height: 18rpx;
		margin-left: 8rpx;
	}
	
	/* CoCo */
	.pdb_r_three{
		color: #FE3131;
		font-size: 26rpx;
	}

	.line{
		width: 100%;
		height: 20rpx;
		background: #F2F5F8;
	}
	.event_details{
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.ed_title{
		font-size: 32rpx;
		color: #222222;
		margin: 40rpx 0;
		font-weight: 600;
	}
	.ed_img{
		width: 100%;
	}
	.pd_footer{
		width: 750rpx;
		height: 160rpx;
		border-top: 2rpx solid #E2E2E2;
		margin-top: 72rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.cg_but{
		 width: 690rpx;
		 height: 88rpx;
		 background: linear-gradient(90deg, #2720DE 0%, #6F00FC 98.24%);
		 border-radius: 12rpx;
		 font-size: 36rpx;
		 color: #ffffff;
		 text-align: center;
		 line-height: 88rpx;
	}
	.cg_but_one{
		background: #ADADAD;
	}
	
	/* 弹窗 */
	.popupBox{
		width: 650rpx;
		background: #fff url('@/static/newsImg/my_number_bg.jpg') no-repeat;
		background-size: 100% auto;
		border-radius: 20rpx;
		padding-bottom: 40rpx;
	}
	.p_title{
		font-size: 40rpx;
		color: #222222;
		width: 100%;
		padding-top: 50rpx;
		padding-bottom: 52rpx;
		text-align: center;
		font-weight: 600;
	}
	.p_subtitle{
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		color: #222222;
	}
	.p_content{
		display: flex;
		width: 100%;
		padding: 0 48rpx;
		color: #CF2B2B;
		font-size: 28rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
	}
	.p_content image{
		width: 28rpx;
		height: 28rpx;
		margin-right: 16rpx;
		margin-top: 5rpx;
	}
	.p_content text{
		flex: 1;
	}
	.p_but{
		width: 200rpx;
		height: 72rpx;
		background: url('/static/index/paradise/but.png') no-repeat;
		background-size: 100% 100%;
		margin: 0 auto;
		margin-top: 66rpx;
	}
	/* end */
</style>
